import React, {Component} from 'react'
import {
    Text,
    Image,
    View,
    StyleSheet,
    Button,
    TextInput,
    FlatList, RefreshControl, ActivityIndicator, SwipeableFlatList,
    TouchableHighlight
} from 'react-native'

const LETTERS = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';'];

export default class FasterLitst extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoading: false,
            dataArray: LETTERS,
        }

    }

    renderItem(data) {
        return (
            <View style={styles.item}>
                <Text style={styles.text}>
                    {data.item}
                </Text>
            </View>
        )
    }

    loadData(freshing) {
        if (freshing) {

            this.setState({
                isLoading: true
            });
        }
        setTimeout(() => {
            let dataArray = [];
            if (freshing) {

                for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
                    dataArray.push(this.state.dataArray[i])

                }
            } else {
                dataArray = this.state.dataArray.concat(LETTERS);
            }
            this.setState({
                dataArray: dataArray,
                isLoading: false
            })
        }, 2000)
    }

    getIndicator() {
        return (
            <View style={styles.indicatorContainer}>
                <ActivityIndicator
                    style={styles.indicator}
                    size={'large'}
                    animating={true}
                />
            </View>
        )
    }

    getQuickAction() {
        return (
            <View style={styles.quickContainer}>
                <TouchableHighlight onPress={()=>{
                    alert("确认删除")
                }}>
                    <View style={styles.quick}>
                        <Text style={styles.text}>
                            删除
                        </Text>
                    </View>
                </TouchableHighlight>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <SwipeableFlatList
                    data={this.state.dataArray}
                    renderItem={(data) => this.renderItem(data)}
                    // refreshing={this.state.isLoading}
                    // onRefresh={() => {
                    //     this.loadData();
                    // }}

                    refreshControl={
                        <RefreshControl
                            title={'title'}
                            colors={['red', 'blue']}
                            refreshing={this.state.isLoading}
                            onRefresh={() => {
                                this.loadData(true)
                            }}
                        />
                    }


                    ListFooterComponent={() => this.getIndicator()}

                    onEndReached={() => {
                        this.loadData()
                    }}

                    renderQuickActions={() => this.getQuickAction()}
                    maxSwipeDistance={100}
                    bounceFirstRowOnMount = {false}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    item: {
        backgroundColor: '#169',
        height: 100,
        margin: 20,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        fontSize: 23,
        color: 'black'
    },
    indicatorContainer: {
        alignItems: 'center'

    },
    indicator: {
        color: 'red',
        margin: 10
    },
    quickContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        margin:20
    },
    quick: {
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'flex-end',
        justifyContent: 'center',
        padding: 10,
        width: 100
    }
})